<template>
  <div class="app-container" v-loading="loading">
    <div class="my-define-dialog-title">
      {{title}}
      <div class="my-define-dialog-title-btn">
        <el-button size="mini" type="primary" @click.native="submitForm">提 交</el-button>
        <el-button size="mini" @click.native="cancel(false)">取 消</el-button>
      </div>
    </div>
    <div style="margin-left: 10px;">
      <el-tabs v-model="activeType">
        <el-tab-pane label="系统模块" name="1"></el-tab-pane>
        <el-tab-pane label="业务模块" name="2"></el-tab-pane>
      </el-tabs>
    </div>
    <el-scrollbar :style="customeStyle">
      <div v-show="activeType==1">
        <el-tree ref="treePower1" default-expand-all check-on-click-node :expand-on-click-node="false" :data="treeData1"
          show-checkbox node-key="id" :default-checked-keys="checkKeyData1" :props="defaultProps"
          :render-content="renderContent1" :check-strictly="sysNodeFlag" @check="handleMenuCheckChange1">
        </el-tree>
      </div>
      <div v-show="activeType==2">
        <el-tree ref="treePower2" default-expand-all check-on-click-node :expand-on-click-node="false" :data="treeData2"
          show-checkbox node-key="id" :default-checked-keys="checkKeyData2" :props="defaultProps"
          :render-content="renderContent2" :check-strictly="sysNodeFlag" @check="handleMenuCheckChange2">
        </el-tree>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import {
    queryTenantPower,
    saveTenantPower
  } from '@/api/system/system'
  export default {
    name: 'assign-power',
    props: {
      Id: {
        type: Number,
        default: 0
      },
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        customeStyle: {
          height: (window.innerHeight - 280) + 'px'
        },
        form: {
          Id: 0
        },
        defaultProps: {
          children: 'children',
          id: 'id',
          label: 'label'
        },
        treeData1: [],
        checkKeyData1: [],
        treeData2: [],
        checkKeyData2: [],
        sysNodeFlag: true,
        activeType: '2',
        loading: false
      }
    },
    created() {
      this.getData()
    },
    mounted() {
      this.changeCss();
    },
    methods: {
      /** 查询列表 */
      getData() {
        this.loading = true
        queryTenantPower(this.Id).then(res => {
          this.loading = false
          if (res.status) {
            this.treeData1 = res.outputData.powerDataList;
            this.checkKeyData1 = res.outputData.powerIdList;
            this.treeData2 = res.outputData.menuDataList;
            this.checkKeyData2 = res.outputData.menuIdList;
            this.$nextTick(() => {
              this.changeCss();
            })
          }
        })
      },
      handleMenuCheckChange1(data, check) {
        var checkedNodes = this.$refs.treePower1.getCheckedNodes()
        this.$nextTick(() => {
          if (data.children) {
            const nodeIndex = checkedNodes.findIndex((node2) => {
              return data.id == node2.id
            })
            const check = nodeIndex > -1
            this.setChildrenCheck(data.children, check, checkedNodes)
            this.$refs.treePower1.setCheckedNodes(checkedNodes)
          }
        })
      },
      setChildrenCheck(children, check, checkedNodes) {
        children.forEach((node) => {
          const nodeIndex = checkedNodes.findIndex((node2) => {
            return node.id == node2.id
          })
          if (check) {
            if (nodeIndex == -1) {
              checkedNodes.push(node)
            }
          } else {
            if (nodeIndex > -1) {
              checkedNodes.splice(nodeIndex, 1)
            }
          }
          if (node.children) {
            this.setChildrenCheck(node.children, check, checkedNodes)
          }
        })
      },
      handleMenuCheckChange2(data, check) {
        var checkedNodes = this.$refs.treePower2.getCheckedNodes()
        this.$nextTick(() => {
          if (data.children) {
            const nodeIndex = checkedNodes.findIndex((node2) => {
              return data.id == node2.id
            })
            const check = nodeIndex > -1
            this.setChildrenCheck(data.children, check, checkedNodes)
            this.$refs.treePower2.setCheckedNodes(checkedNodes)
          }
        })
      },
      submitForm() {
        var that = this;
        var nodes = []
        if (this.activeType == 1) {
          nodes = this.$refs.treePower1.getCheckedNodes()
        } else {
          nodes = this.$refs.treePower2.getCheckedNodes()
        }
        var Ids = [];
        nodes.forEach(function(node) {
          Ids.push(node.id)
        })
        this.loading = true
        saveTenantPower({
          Id: this.Id,
          Ids: JSON.stringify(Ids),
          activeType: this.activeType
        }).then(res => {
          this.loading = false
          if (res.status) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.cancel();
          }
        })
      },
      cancel() {
        this.$$parent(this, "doClosePower")
      },
      renderContent1(h, {
        node,
        data,
        store
      }) { //树节点的内容区的渲染 Function
        var classname = "";
        if (node.level == 4) {
          classname = "my-last-tree-node";
        }
        return h(
          "p", {
            class: classname
          },
          node.label
        );
      },
      renderContent2(h, {
        node,
        data,
        store
      }) { //树节点的内容区的渲染 Function
        var classname = "";
        if (node.level == 3) {
          classname = "my-last-tree-node";
        }
        return h(
          "p", {
            class: classname
          },
          node.label
        );
      },
      changeCss() {
        var levelName = document.getElementsByClassName("my-last-tree-node"); // levelname是上面的最底层节点的名字
        for (var i = 0; i < levelName.length; i++) {
          // cssFloat 兼容 ie6-8  styleFloat 兼容ie9及标准浏览器
          levelName[i].parentNode.style.cssFloat = "left"; // 最底层的节点，包括多选框和名字都让他左浮动
          levelName[i].parentNode.style.styleFloat = "left";
          levelName[i].parentNode.onmouseover = function() {
            this.style.backgroundColor = "#fff";
          };
        }
      }
    }
  }
</script>
